
<template>
  <div class="Page_UserStyleBox">
    <div class="Page_UserStyleLeftBox">
      <PageHomeFromRouer></PageHomeFromRouer>
    </div>
    <div class="Page_UserStyleRightBox">
      <div class="Page_UserStyleHeadTitleBox">
        <PageHeadRigthFrom></PageHeadRigthFrom>
      </div>
      <div class="Page_UserStyleBreadcrumb">
        <a-breadcrumb class="Page_HeadBreadcrumb">
          <a-breadcrumb-item><a href="/home">工作台</a></a-breadcrumb-item>
          <a-breadcrumb-item><a href="/user">用户管理</a></a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="Page_UserStyleBodyFrom">
        <div class="Page_UserStyleFromBox">
          <p><span>用户:</span><a-input style="width: 200px"  @click="userIpt" v-model:value="value1"  allow-clear /></p>
          <p><span>邮箱:</span><a-input style="width: 200px"  @click="emailIpt" v-model:value="value2"  allow-clear /></p>
          <p>
             角色: <a-tree-select
              v-model:valueS="valueS"
              show-search
              style="width: 200px"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              allow-clear
              tree-default-expand-all
              :tree-data="treeDataSA"
            >
            </a-tree-select>
          </p>
          <p>
             状态:<a-tree-select
              v-model:value="value"
              show-search
              style="width: 200px"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              allow-clear
              tree-default-expand-all
              :tree-data="treeData"
            >
            </a-tree-select>
          </p>
        </div>
        <div class="Page_UserStyleContextBody">
          <div class="Page_UserStyleContextHeaderIcon">
            <p></p>
            <p></p>
            <p><a-popover style="width:50px;" title="刷新"><reload-outlined class="IconFromSize" @click="warning" /></a-popover></p>
          </div>
          <div class="Page_UserStyleContextTitle">
            <p><a-checkbox v-model:checked="checked1" disabled />&nbsp;&nbsp;&nbsp;账户</p>
            <p>邮箱</p>
            <p>角色</p>
            <p>状态</p>
            <p>注册日期</p>
            <p id="Page_UserStyleContextOption">操作</p>
          </div>
          <div class="Page_UserStyleFooterNull">
             <a-empty class="UserStyleFooterNull" />
          </div>
        </div>
          <dl style="textAlign: center; marginTop: 20px">
          <dt>
            <a href="https://github.com/fantasticit/wipi"
              ><img src="../../assets/b.png.png" alt=""
            /></a>
          </dt>
          <dd>Copyright ® 2022 Designed by Fantasticit.</dd>
        </dl>
      </div>
      
    </div>
    
  </div>
</template>


<script>
import PageHeadRigthFrom from "../../components/PageHeadRigthFrom";
import PageHomeFromRouer from "../../components/PageHomeFromRouer";
import {ReloadOutlined} from '@ant-design/icons-vue';
import { defineComponent, ref, watch } from "vue";
import { message } from 'ant-design-vue';
export default {
  data() {
    return {};
  },
  beforeCreate() {},
  setup() {
     const value1 = ref('');
    const value2 = ref('');
    const value = ref();
    const valueS = ref();
    const treeData = ref([


      {
        title: "锁定",
        value: "锁定",
      },
      {
        title: "可用",
        value: "可用",
      },
    ]);
    const treeDataSA = ref([
       {
        title: "管理员",
        valueS: "管理员",
      },
      {
        title: "访客",
        valueS: "访客",
      },
    ])
    watch(value, () => {
      console.log(value.value);
    });
     watch(valueS, () => {
      console.log(value.value);
    });
    return {
      value,
      valueS,
      treeData,
      treeDataSA,
      value1,
      value2
    };
  },
  created() {},
  methods: {
    //用户
    userIpt(){
      
    },
    //邮箱
    emailIpt(){

    }
    ,
    //刷新
    warning(){
      message.warning("访客无权进行该操作")
    }
  },
  components: {
    PageHomeFromRouer,
    PageHeadRigthFrom,
    ReloadOutlined
  },
};
</script>

<style>
.Page_UserStyleBox {
  width: 100%;
  height: 100%;
  display: flex;
}
.Page_UserStyleLeftBox {
  width: 13%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  background: #001529;
  border-right: 1px solid #ccc;
}
.Page_UserStyleRightBox {
  width: 100%;
  height: 100%;
}
.Page_UserStyleHeadTitleBox {
  width: 100%;
  height: 45px;
  border-bottom: 1px solid #ccc;
}
.Page_UserStyleBreadcrumb {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #ccc;
}
.Page_HeadBreadcrumb {
  margin: 10px 20px;
  display: inline-block;
}
.Page_UserStyleBodyFrom {
  width: 100%;
  height: 100%;
  background: #eff2f5;
  overflow-y: auto;
}
.Page_UserStyleFromBox {
  width: 96%;
  height: 150px;
  background: #fff;
  margin-left: 30px;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.Page_UserStyleContextBody{
  width: 96%;
  height: 500px;
  background: #fff;
  margin-left: 30px;
  margin-top: 30px;
}
.Page_UserStyleContextHeaderIcon{
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.Page_UserStyleContextHeaderIcon>P{
  margin: 10px 10px;
}
.IconFromSize{
  font-size: 20px;
}
.Page_UserStyleContextTitle{
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #f5f5f5;
}
.Page_UserStyleContextTitle>p{
  border-right: 1px solid #ccc;
  width: 200px;
  margin-top: 10px;
  text-align: center;
}
#Page_UserStyleContextOption{
  border-right: none;
}
.Page_UserStyleFooterNull{
  width: 100%;
  height: 100%;
}
.UserStyleFooterNull{
  margin-top: 70px;
}
</style>
